@use '../core/style/variables';
@use '../core/style/layout-common';
@use '../core/style/private';
@use './tabs-common';

.mat-tab-group {
  display: flex;
  flex-direction: column;

  &.mat-tab-group-inverted-header {
    flex-direction: column-reverse;
  }
}

// Wraps each tab label
.mat-tab-label {
  @include tabs-common.tab-label;
  position: relative;
}

@media (variables.$xsmall) {
  .mat-tab-label {
    padding: 0 12px;
  }
}

@media (variables.$small) {
  .mat-tab-label {
    padding: 0 12px;
  }
}

// Note that we only want to target direct descendant tabs.
.mat-tab-group[mat-stretch-tabs] > .mat-tab-header .mat-tab-label {
  flex-basis: 0;
  flex-grow: 1;
}

// The bottom section of the view; contains the tab bodies
.mat-tab-body-wrapper {
  @include private.private-animation-noop();
  position: relative;
  overflow: hidden;
  display: flex;
  transition: height tabs-common.$tab-animation-duration variables.$ease-in-out-curve-function;
}

// Wraps each tab body
.mat-tab-body {
  @include layout-common.fill;
  display: block;
  overflow: hidden;

  // Fix for auto content wrapping in IE11
  flex-basis: 100%;

  &.mat-tab-body-active {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1;
    flex-grow: 1;
  }

  .mat-tab-group.mat-tab-group-dynamic-height &.mat-tab-body-active {
    overflow-y: hidden;
  }
}
